<template>
  <div class="page-common-layout progress-statistics-container">
    <div class="page-header">
      <!-- 项目列表 -->
      <a-tree-select
        style="width: 350px"
        v-model="tenantCode"
        treeNodeFilterProp="title"
        show-search
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择"
        searchPlaceholder="请输入"
        tree-default-expand-all
        :replaceFields="{
          children: 'child',
          title: 'orgName',
          key: 'id',
          value: 'orgCode',
        }"
        :tree-data="treeData"
        @change="tenantChange"
      >
      </a-tree-select>
    </div>
    <div class="page-body">
      <pageBimVisual v-if="componentVisible"></pageBimVisual>
    </div>
  </div>
</template>
<!-- 进度统计 -->
<script>
//数据视化
import pageBimVisual from "./components/pageBimVisual";
import { getProListTreeByQX } from "@/api/common";
import { pageDestroy } from "@/blackHole/Engine";
export default {
  provide() {
    return {
      currentProject: () => this.treeItem,
    };
  },
  data() {
    return {
      pageModule: "pageBimVisual",
      componentVisible: false,
      tenantCode: undefined,
      treeData: [],
      treeItem: {},
    };
  },
  components: {
    pageBimVisual,
  },
  mounted() {
    this.getProjectTreeData();
  },
  methods: {
    //查询项目列表-树形
    getProjectTreeData() {
      return new Promise((resolve, reject) => {
        getProListTreeByQX()
          .then((res) => {
            this.treeData = res?.data ?? [];
            this.tenantCode = this.treeData?.[0]?.orgCode ?? undefined;
            this.treeItem = this.treeData?.[0] ?? {};
            resolve();
          })
          .catch((_) => {
            this.tenantCode = undefined;
            this.treeItem = {};
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.componentVisible = true;
          });
      });
    },
    //选择项目
    tenantChange(value, label, extra) {
      this.treeItem = extra.triggerNode.dataRef;
      let { isProject = false } = extra.triggerNode.dataRef;
      this.componentVisible = false;
      setTimeout((_) => {
        this.componentVisible = true;
      }, 300);
      //企业级
      if (!isProject) {
      }
      //项目级
      else {
      }
    },
  },
  beforeDestroy() {
    pageDestroy();
  },
};
</script>
<style lang="less" scoped>
.progress-statistics-container {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  .page-header {
    height: 50px;
    background-color: @base-bg-color;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #f0f2f5;
    // /deep/.ant-select {
    //     min-width: 375px;
    //     max-width: 500px;
    //     font-size: 18px;
    //     font-family: Microsoft YaHei, Microsoft YaHei;
    //     font-weight: bold;
    //     color: @title-color;
    //     .ant-select-selection {
    //       border: 0;
    //       box-shadow: none;
    //     }
    //     .ant-select-arrow-icon {
    //       color: @title-color;
    //     }
    // }

    .check-page-module {
      display: flex;
      font-size: 14px;
      color: #999;
      position: relative;
      height: 30px;
      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 16px;
        background: #d9d9d9;
        left: 72px;
        top: 4px;
      }
      div {
        height: 100%;
        position: relative;
        line-height: 26px;
        cursor: pointer;
        overflow: hidden;
        &::after {
          content: "";
          position: absolute;
          width: 20px;
          height: 2px;
          background: #1677ff;
          border-radius: 2px 0px 2px 0px;
          bottom: 0;
          transform: translateX(-50%);
          left: 50%;
          opacity: 0;
        }
        &:not(:first-child) {
          margin-left: 32px;
        }
        &.active {
          color: @title-color;
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
  .page-body {
    flex: 1;
    overflow: hidden;
  }
}
</style>
